<template>
    <div class="share-carousel-component-container">
        <div class="swiper-container" id="top_swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <!-- 打开扬帆APP的遮罩层组件 -->
                    <sharedark @close="getVal" :wakeup-param="wakeupParam"></sharedark>
                </div>
                <div class="swiper-slide" v-for="(item,index) in info">
                    <!-- 显示热门资讯的遮罩层组件 -->
                    <shareinfo :pics="item.pics" :title="item.title" :detailUrl="item.detailUrl" @close="getVal"></shareinfo>
                </div>
            </div>
            <!--<div :class='{"swiper-pagination": paginationshow}' :style='{"text-align": paginationdesition}'></div>-->
        </div>
        <div class="swiper-pagination" style="width: 100%;top: 36px;"></div>
    </div>
</template>

<script>
    import Sharedark from "./share_dark.vue"
    import Shareinfo from "./share_info.vue"
    import '../assets/libs/swiper/js/swiper.js'
    import qs from "querystring"

    export default {
        components: {
            Sharedark,
            Shareinfo
        },
        props: {
            paginationshow: {
                type: Boolean,
                default: true
            },
            paginationdesition: {
                type: String,
                default: 'center'
            },
            direction: {
                type: String,
                default: 'horizontal'
            },
            loop: {
                type: Boolean,
                default: true
            },

            autoplay: {
                type: Number,
                default: 3000
            },
            effect: {
                type: String,
                default: 'slide'
            },
            // props属性的传递
            wakeupParam: {
                type: Object,
                default: function () {
                    return {
                        contentType: 6,
                        contentParam: "",
                        infoParams:{}
                    }
                }
            },
            // layerDisplay: {
            //     type: Boolean,
            //     default: true
            // }
        },
        data: function () {
            return {
                info: {
                    type: Object,
                    default: {}
                },
            }
        },
        beforeCreate: function () {
            let That = this;
            // 分享最新资讯
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getNewContentList",
                    qs.stringify({"apiVersion": process.env.VUE_APP_SERVER_VER})
            ).then((response) => {
                // console.log(interbaseUrl + "setsail/external/externalService?service=getNewContentList");
                // console.log("@_@_@_@_@_@_@_@_@_@_@");
                 //console.log(JSON.stringify(response.data.data, undefined, 2));
                // console.log("@_@_@_@_@_@_@_@_@_@_@");
                if (response.data.data) {
                    this.info = response.data.data.rows;
                    // console.log(JSON.stringify(response.data.data, undefined, 2));
                    setTimeout(function () {
                        new Swiper("#top_swiper", {
                            // direction: That.direction,
                            loop: "loop",
                            pagination: ".swiper-pagination",
                            paginationType: "bullets",
                            autoplay: 5000,
                            effect: "slide",
                            autoplayDisableOnInteraction: false,
                            preventClicks: false
                        });
                    }, 100)
                }
            });
        },
        mounted: function () {
        },
        methods: {
            getVal: function (bol) {
                // this.layerDisplay = bol;
                // console.log(bol);
                this.$emit("change", bol);
            }
        }
    }
</script>

<style>
    @import '../assets/libs/swiper/css/swiper.css';

    .share-carousel-component-container {
        box-sizing: border-box;
    }

    .share-carousel-component-container .swiper-container {
        width: 100%;
        height: 3.3rem;
        position: relative;
    }

    .share-carousel-component-container .swiper-container .swiper-wrapper {
    }

    .swiper-pagination-bullet {
        width: 5px;
        height: 2px;
        display: inline-block;
        border-radius: 2px;
        background: #fff;
        margin: 0 1.5px;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        opacity: 1;
        background: #007aff;
        width: 14px;
        background-color: #9852FF !important;
    }

    /* .share-carousel-component-container .swiper-container .swiper-pagination {
         width: 3.0rem;
         height: 0.8rem;
         position: absolute;
         bottom: 0.1rem;
         left: 50%;
         margin-left: -1.5rem;
         z-index: 999;
         background-color: #FFF;
     }*/

    /*    .share-carousel-component-container .swiper-container .swiper-pagination .swiper-pagination-bullet {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #FFF;
        }*/

    /*    .share-carousel-component-container .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
            background-color: #9852FF;
        }*/
</style>